<template>

	<view class="" style="height: 100%;position: relative;min-height: 100vh;">
		<u-skeleton :loading="isFirst" rows="15">
           <view class="" v-if="data.data">
				<view class="" v-if="data.data.length==0">
					<u-empty style="" text="暂时没有错题" icon="../../../../static/imgs/data.png">
					</u-empty>
				</view>
				
				
				<view class="" v-if="data.data.length!=0">
					<view class="aa">
						<view class="allContent" :animation="animation" v-if="data.data">
							<view class="top">
					
								<view class="" style="margin-top: 10rpx;">
									<view class="title-type">
										<view class="floatleft" style="margin-left:20rpx">
											<view class="y_tag y_tag_bgPrimary" style="margin-top: 10rpx;">
												{{dindex+1}}.单选题
											</view>
										</view>
					
										<view class="floatright" style="margin-right: 10rpx;">
											<view class="y_tag y_tag_bgWarning" style="margin-top: 10rpx;">
												{{data.data[dindex].labels}}
											</view>
										</view>
									</view>
								</view>
					
							</view>
					
							<!-- <view class="allContent" :animation="animation"> -->
					
							<view class="content">
								<view class="title-content">
									<rich-text :nodes="data.data[dindex].content"></rich-text>
								</view>
					
							</view>
					
							<view style="width: 100%;" v-for="(item,i) in data.data[dindex].options" :key="item.id">
								<view class="options"
									:class="[item.id==data.data[dindex].answer?'isError':'',item.isRight==1?'selectOptions':'']">
									{{check[i]}}. {{item.content}}
								</view>
					
							</view>
					
							<u-divider />
					
					
							<view style="display: flex;justify-content: space-around;">
								<view class="prev">
									<u-button @click="prev" :disabled='dindex<=0' type="warning">上一题</u-button>
								</view>
					
					
								<view class="next">
									<u-button @click="next" :disabled='dindex+1==pages.total'
										v-if="dindex+1!=pages.page*pages.limit" type="primary">下一题</u-button>
					
									<u-button @click="getTopic" :disabled='data.data.length-1==pages.total'
										v-if="dindex+1==pages.page*pages.limit" type="primary">加载更多</u-button>
								</view>
					
							</view>
					
					
					
					
							<view class="" style="margin-bottom: 70rpx;">
								<view class="errorperson" v-if="data.data[dindex].source==''||data.data[dindex].source==null"
									style="background-color: rgb(236, 249, 255); color:blue;">
								</view>
					
					
								<view class="errorperson" v-else
									style="background-color: rgb(236, 249, 255); color: rgb(25, 137, 255);display: flex;">
									<view class="icon iconfont icon-icon_gantanhaozhong" style="font-size: 40rpx;float: left;">
										<view class="floatright" style="margin-top: -8rpx;margin-left: 10rpx;">
											<text style="font-size: 24rpx;">错误来源 【{{data.data[dindex].source}}】</text>
										</view>
									</view>
								</view>
							</view>
					
						</view>

					
					
					
					
					</view>
					
					<view class="" style="position: absolute;bottom: 0px;" v-if="data.data">
						<view class="footers">
							<view class="mylove" @click="addlikes(data.data[dindex])" v-if="data.data[dindex].isLike==0">
								<div class="icon iconfont icon-shoucang" style="border-right: 1px solid #eee;" v-if="data.data[dindex].isLike==0">
									<text style="padding-left: 10rpx; font-size: 30rpx;">收藏</text>
								</div>
							</view>
							
							<view class="mylove" @click="deleteLikes(data.data[dindex])" v-if="data.data[dindex].isLike!=0">
								<div class="icon iconfont icon-shoucang" style="color: rgb(227,157,143);" v-if="data.data[dindex].isLike!=0">
									<text style="padding-left: 10rpx; font-size: 30rpx;color: black;">取消</text>
								</div>
							</view>
							
							<view class="mylove" @click="clearWrongQuestions(data.data[dindex])">
								<div class="icon iconfont icon-shanchu">
									<text style="padding-left: 10rpx; font-size: 30rpx;">删除</text>
								</div>
							</view>
							<view class="mylove">
								<div class="icon iconfont icon-renwu">
									<text style="padding-left: 10rpx; font-size: 30rpx;">{{dindex+1}}/{{data.data.length}}题</text>
								</div>
							</view>
							<view class="mylove">
								<div class="icon iconfont icon--_kucunshuliangtongji">
									<text style="padding-left: 10rpx; font-size: 30rpx;">共{{pages.total}}题</text>
								</div>
							</view>
						</view>
					</view>
				</view>
           </view>
			
		</u-skeleton>
	</view>

</template>

<script>
	import {
		GetCuotiQuestions,AddLikeQuestion,DeleteLikeQuestion,ClearWrongQuestions
	} from '../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				type: 0,
				data: {},
				dindex: 0,
				check: ["A", "B", "C", "D", "E", "F", "G"],
				pages: {
					limit: 20,
					page: 1,
					total: 0
				},
				okAnswer: "",
				youAnswer: "",
				answerCount: 0,
				isFirst: true,
				animation: null, //动画对象
				jiaodu: 0,
			}
		},
		onShow() {
			this.getCuotiQuestions();
		},
		onLoad(options) {
			this.type = options.type;
		},
		methods: {
			/**
			 * 删除错题本的题目
			 */
			clearWrongQuestions(val){
				ClearWrongQuestions({id:val.id}).then(res=>{
					if(res.result===0){
						uni.showToast({
							icon:"none",
							title:"操作成功"
						})
						this.data.data.map((d,i)=>{
							if(d.id==val.id){
								this.data.data.splice(i,1);
							}
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
					
				})
			},
			/**删除收藏
			 * @param {Object} val
			 */
			deleteLikes(val){
				const obj=val;
				AddLikeQuestion({id:obj.qid}).then(res=>{
					if(res.result===0){
						uni.showToast({
							icon:"none",
							title:"操作成功"
						})
						this.data.data.map(d=>{
							if(d.qid==obj.qid){
								d.isLike=0;
							}
						})
						console.log(this.data.data);
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				})
			},
			/**
			 * 添加收藏
			 */
			addlikes(val){
				
				const obj=val;
				AddLikeQuestion({id:obj.qid}).then(res=>{
					if(res.result===0){
						uni.showToast({
							icon:"none",
							title:"操作成功"
						})
						this.data.data.map(d=>{
							if(d.qid==obj.qid){
								d.isLike=1;
							}
						})
						console.log(this.data.data);
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				})
			},
			/**
			 * 加载获取更多的试题
			 */
			getTopic() {
				uni.showLoading({
					title:"请稍后..."
				});
				const {
					id,
					pages,
					check
				} = this;
				let obj={
					page: this.pages.page,
					limit: this.pages.limit
				};
				 if(this.type==1){
					  obj={
						 type:1,
					 	page: this.pages.page,
					 	limit: this.pages.limit
					 }
				 }
               this.pages.page+=1;
				GetCuotiQuestions(obj).then((res) => {
					let okAnswer = []; //正确答案
					let youAnswer = []; //你的答案
					let answerCount = 0; //答题数
					let zqlv = 0;
					if (res.result === 0) {
						this.pages.total = res.data.total;
						//循环每个题目
						res.data.data.map(d => {
							//因为每个题目都有自己的答案 所以这里要清空上个题目的记录
							okAnswer = [];
							youAnswer = [];
							//如果回答过题目 则答题数+1
							if (d.answer != "" && d.answer != null) {
								answerCount += 1;
							}

							//将选择的答案分割成数组
							let answer = d.answer.split(",");
							//每个题目的选项进行循环
							d.options.map((e, i) => {
								//如果是正确答案 则放入正确答案数组
								if (e.isRight == 1) {
									okAnswer.push(check[i]);
								}

								//如果你的答案数组包含当前循环的答案id 则保存你选的答案字母
								if (answer.includes(e.id)) {
									youAnswer.push(check[i]);
								}
								//最后赋值
								if (i == d.options.length - 1) {

									if (okAnswer.join(",") == youAnswer.join(",")) {
										zqlv += 1;
									}
									d.okAnswer = okAnswer.join(",");
									d.youAnswer = youAnswer.join(",");
									return;
								}

							});


						})
						res.data.answerCount = answerCount;
						res.data.accuracy = (zqlv / res.data.data.length) * 100;
						let newSz=this.data.data.concat(res.data.data);
						this.data.data=newSz;
						uni.hideLoading();
						this.next();
						this.isFirst=false;

					} else if (res.result == -1 && this.id != "") {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/exam/exam"
							})
						}, 1000);
					} else {
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}
				})
			},
			/**
			 * 获取错题本数据
			 */
			getCuotiQuestions() {
				const {
					id,
					check
				} = this;
				 let obj={
					page: this.pages.page,
					limit: this.pages.limit
				};
                 if(this.type==1){
					  obj={
						 type:1,
					 	page: this.pages.page,
					 	limit: this.pages.limit
					 }
				 }
				GetCuotiQuestions(obj).then((res) => {
					let okAnswer = []; //正确答案
					let youAnswer = []; //你的答案
					let answerCount = 0; //答题数
					let zqlv = 0;
					if (res.result === 0) {
						this.pages.total = res.data.total;
						//循环每个题目
						res.data.data.map(d => {
							//因为每个题目都有自己的答案 所以这里要清空上个题目的记录
							okAnswer = [];
							youAnswer = [];
							//如果回答过题目 则答题数+1
							if (d.answer != "" && d.answer != null) {
								answerCount += 1;
							}

							//将选择的答案分割成数组
							let answer = d.answer.split(",");
							//每个题目的选项进行循环
							d.options.map((e, i) => {
								//如果是正确答案 则放入正确答案数组
								if (e.isRight == 1) {
									okAnswer.push(check[i]);
								}

								//如果你的答案数组包含当前循环的答案id 则保存你选的答案字母
								if (answer.includes(e.id)) {
									youAnswer.push(check[i]);
								}
								//最后赋值
								if (i == d.options.length - 1) {

									if (okAnswer.join(",") == youAnswer.join(",")) {
										zqlv += 1;
									}
									d.okAnswer = okAnswer.join(",");
									d.youAnswer = youAnswer.join(",");
									return;
								}

							});


						})
						res.data.answerCount = answerCount;
						res.data.accuracy = (zqlv / res.data.data.length) * 100;

						this.data = res.data;
						this.isFirst = false;

					} else if (res.result == -1 && this.id != "") {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/exam/exam"
							})
						}, 1000);
					} else {
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}
				})
			},


			/**
			 * 上一题
			 */
			prev() {
				let {
					dindex,
					data
				} = this;

				// index =index- 1;
				// this.setData({
				//   index: index
				// });
				if (dindex <= 0) {
					return
				}
				setTimeout(() => {
					this.dindex = dindex - 1;
				}, 350);
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					dindex,
					data
				} = this;
				// if (index >= testpaper.length - 1) {
				//   return
				// }
				// index += 1;
				// this.setData({
				//   index: index
				// });
				setTimeout(() => {
					this.dindex = dindex + 1;

				}, 350);


			},



			close() {
				this.show = false
			},

			//倒计时改变事件
			onChange(e) {
				this.timeData = e
			},

		}
	}
</script>

<style scoped lang="scss">
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");

	.father {
		width: 100vw;
		height: 100%;
		position: relative;
	}

	.love {
		position: fixed;
		bottom: 0px;
	}

	.green {
		color: rgb(7, 193, 96);
	}

	.red {
		color: red;
	}

	.footers {
		/* border: 1px solid #000; */
		margin-top: 156rpx;
		border-top: 1px solid #eee;
		width: 100vw;
		display: flex;
		align-items: center;
		/* font-weight: 600; */
	}

	.mylove {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		flex: 1;
	}

	.mylove:not(:last-child) {
		border-right: 1px solid #eee;
	}





	.errorperson {
		margin-top: 20rpx;
		background-color: rgb(251, 227, 225);
		width: 100%;
		// margin-left: 2.1%;
		color: rgb(219, 118, 132);
		font-size: 26rpx;
		padding: 16rpx;
	}

	.answers {
		margin-top: 26rpx;
		width: 100%;
		display: flex
	}

	.answer {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
	}


	.top {
		height: 66rpx;
		line-height: 66rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		// background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 100%;
		border-radius: 8rpx;
		padding-bottom: 10rpx;
		// margin-left: 0.9%;
		// padding: 0 8rpx 8rpx 8rpx;
		margin-top: 10rpx;
		padding: 6rpx;
	}

	.content {
		border: 1px solid #eee;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		// text-align: center;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(7, 193, 96) !important;
		color: #fff !important;
	}

	.isError {
		background-color: red;
		color: #fff !important;
	}

	// .prev,
	// .next {
	// 	width: 96%;
	// 	margin-left: 2%;
	// 	// margin-top: 20rpx;
	// 	margin-top: 0rpx;
	// }

	 .prev{
		 flex: 1;
		 margin-left: 10rpx;
		 margin-right: 5rpx;
	 }
	
	.next {
		flex: 1;
		margin-right: 10rpx;
		margin-left: 5rpx;
		 // width: 59vw;
		// margin-left: 1%;
		// margin-top: 20rpx;
		margin-top: 0rpx;
	}
	
	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}




	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}



	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>